<template>
    <el-main style="height: 930px;">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>任务单管理</el-breadcrumb-item>
        </el-breadcrumb>

      <el-date-picker
            v-model="value1"
            @change="clear"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="position: relative;left: 400px;"
            >
          </el-date-picker>

      <el-select v-model="value" placeholder="请选择想要查询的信息"
      style="position: relative;left: 420px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>

        <el-input
          :placeholder="value==0?'请选择想要查找的信息':value==1?'请输入任务单号':value==2?'请输入派送员代号':value==3?'请输入收货人姓名':value==4?'请输入任务类型':value==5?'请输入任务状态':value==6?'请输入分站代号':'(⊙﹏⊙)'"
          v-model="target"
          @change="clear"
          clearable
          style="width: auto;left: 450px;position: relative;"
          @keyup.enter.native="getDetail">
        </el-input>

        <el-button
        type="primary"
        icon="el-icon-search"
        class="btn1"
        style="position: relative;left: 480px;"
        @click="getByDate">
        搜索</el-button>

      </div>


      <div>
            <el-table
                :data="tableData"
                :cell-style="{textAlign:'center'}"
                :header-cell-style="{textAlign:'center'}"
                style="width: 3000px;"
                empty-text="无"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
                <el-table-column
                  prop="orderID"
                  label="订单号"
                  width="200px"
                  sortable="true"
                  text-align: center>
                </el-table-column>
                <el-table-column
                  prop="taskID"
                  label="任务单号"
                  width="200px"
                  sortable="true"
                  text-align: center>
                  <template slot-scope="scope">
                    <el-link :underline="false" @click="">{{scope.row.taskID}}</el-link>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  prop="fenzhanID"
                  label="分站代号"
                  sortable="true"
                  width="100px">
                </el-table-column>
                <el-table-column
                  prop="postmanID"
                  label="派送员代号"
                  sortable="true"
                  width="120px">
                </el-table-column> -->
                <el-table-column
                  prop="receiverName"
                  label="客户姓名"
                  sortable="true"
                  width="114px">
                </el-table-column>
                <!-- <el-table-column
                  prop="receiverPhone"
                  label="收货人电话"
                  sortable="true"
                  width="114px">
                </el-table-column> -->
                <el-table-column
                  prop="receiverAddress"
                  label="投递地址"
                  sortable="true"
                  width="250px">
                </el-table-column>
                <el-table-column
                prop="productName"
                label="商品名称"
                sortable="true"
                width="100px">
                </el-table-column>
                <el-table-column
                prop="productNum"
                label="商品数量"
                sortable="true"
                width="100px">
                </el-table-column>
                <!-- <el-table-column
                prop="unit"
                label="计量单位"
                sortable="true"
                width="100px">
                </el-table-column> -->
                <!-- <el-table-column
                prop="serviceCharge"
                label="服务费用"
                sortable="true"
                width="100px">
                </el-table-column> -->
                <!-- <el-table-column
                prop="tip"
                label="备注"
                sortable="true">
                </el-table-column> -->
                <el-table-column
                  prop="serviceTime"
                  label="要求完成日期"
                  sortable="true"
                  width="150px">
                </el-table-column>
                <el-table-column
                prop="taskType"
                label="任务类型"
                sortable="true"
                width="100px">
                </el-table-column>
                <el-table-column
                  prop="taskStatus"
                  label="任务状态"
                  sortable="true"
                  width="120px">
                 <template slot-scope="scope" >
                   <el-tag
                   :type="scope.row.taskStatus=='已领货'?'primary':scope.row.taskStatus=='完成'?'info':scope.row.taskStatus=='失败'?'danger':scope.row.taskStatus=='已调度'?'priamry':scope.row.taskStatus=='可分配'?'success':'primary'">
                   {{scope.row.taskStatus}}
                   </el-tag>
                 </template>
                </el-table-column>

                <!-- <el-table-column label="操作" sortable="true">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="primary" round
                            @click="haha()">编辑</el-button>

                            </template>
                </el-table-column> -->
              </el-table>
          </div>

  <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 8, 10]"
      :total=allData.length
      :page-size="pageSize"
      :current-page="currentPage"
      >
    </el-pagination>
  </div>
    </el-main>

  </el-container>


  </el-container>

</template>

<script>
  import axios from 'axios'
  export default{
    name: 'Task',
    data(){
      return {
        target:'',
        allData:[],
        tableData:[],
        currentPage:1,
        pageSize:5,
        loading:false,
        options:[{
          value: 0,
          label: '-'
        }, {
          value: 1,
          label: '任务单号'
        }, {
          value: 4,
          label: '任务类型'
        }, {
          value: 5,
          label: '任务状态'
        }, {
          value: 6,
          label: '分站代号'
        }],
        value:0,
        value1:[]
      }
    },
    methods:{
      getByDate(){
        this.loading=true;
        // let ttt = {};
        // ttt["startDate"]=this.value1[0];
        // ttt["endDate"]=this.value1[1];
      //   const data = {
      //     dateBody:{
      //       startDate:this.value1[0],
      //       endDate:this.value1[1]

      //     }
      //   }
      let data = new FormData();
      data.append("startDate",this.value1[0]);
      data.append("endDate",this.value1[1]);
        axios.post('http://localhost:8087/test/task/date',data).then(resData=>{
          this.allData = resData.data.data;
          this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
          this.loading=false;
        }).catch(err =>{
          this.loading=false;
        });
      },
      getAll(){
        this.loading=true;

          axios.get('http://localhost:8087/test/task/all').then(resData=>{
            // console.log(resData);
            this.allData = resData.data.data;
            this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
            this.loading=false;
          }).catch(err =>{
            this.loading=false;
          });
        },

      // getByPage(){
      //    this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
      //    console.log("asdsad"+this.tableData);
      //  },
      getDetail(){
        this.loading=true;
        switch(this.value){
          case 0:
          alert("请先选择想要查询的信息！");
          this.getAll()
          break;
          case 5:
          axios.get('http://localhost:8087/test/task/status/'+this.target).then(resdata=>{
          this.allData = resdata.data.data;
          this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
          this.loading=false;
        }).catch(err =>{
          this.loading=false;
        });
        break;
        case 1:
          axios.get('http://localhost:8087/test/task/id/'+this.target).then(resdata=>{
          this.allData = resdata.data.data;
          this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
          console.log(this.tableData)
          this.loading=false;
        }).catch(err =>{
          this.loading=false;
        });
        break;
        case 2:
          axios.get('http://localhost:8087/test/task/postId/'+this.target).then(resdata=>{
          this.allData = resdata.data.data;
          this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
          this.loading=false;
        }).catch(err =>{
          this.loading=false;
        });
        break;
        case 3:
          axios.get('http://localhost:8087/test/task/rname/'+this.target).then(resdata=>{
          this.allData = resdata.data.data;
          this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
          this.loading=false;
        }).catch(err =>{
          this.loading=false;
        });
        break;
        case 4:
          axios.get('http://localhost:8087/test/task/type/'+this.target).then(resdata=>{
          this.allData = resdata.data.data;
          this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
          this.loading=false;
        }).catch(err =>{
          this.loading=false;
        });
        break;
        case 6:
          axios.get('http://localhost:8087/test/task/fenzhanId/'+this.target).then(resdata=>{
          this.allData = resdata.data.data;
          this.tableData = this.allData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize);
          this.loading=false;
        }).catch(err =>{
          this.loading=false;
        });
        }
      },

      //上色功能，目前不知道为什么用不了，先放一放
      // Dye({row,rowIndex}){
      //   if(rowIndex == 1){
      //     return 'success-row';
      //     // alert(row.taskStatus);
      //   } else if(row.taskStatus == "缺货"){
      //     return 'quehuo';
      //     // alert(row.taskStatus);
      //   }
      //   return '';
      //   // alert(row.taskStatus);
      // },

      haha(row,index){
        console.log(index);
      },
      clear(){
        if(this.value1==null || this.target=='') {
          this.getAll();
        }
      },
      test(){
        alert("我被电了");
      },

      //分页用
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getAll();
        console.log(this.tableData);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getAll();
        console.log(this.tableData);
        // console.log(this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage*this.pageSize));
      }

    },
    mounted() {
      // this.loading=true;
      this.getAll()
      //
      // this.getByPage()
    }

  }

</script>

<style>

  .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #00aaff;
    }

  .el-table .quehuo {
    background: #FF0000;
  }

  .btn1 {
    position: relative;
    right: 0.625rem;
  }

</style>
